<template>
  <section class="text-gray-600 body-font overflow-hidden">
    <div class="container px-5 py-24 mx-auto">
      <div class="flex flex-col text-center w-full mb-8">
        <h1 class="text-left link">服务器</h1>
        <p class="text-left textinfo">可根据需要选择不同区域</p>
        <div class="contBox">
          <div class="items-tabs">
            <div v-for="(item, index) in serverdata" :key="index" class="list-tabs"
              :class="{ 'hover-list': index === ConfirmTabs }" @click.stop="TbasInfo(index)">
              <div>
                <span> {{ index }}</span>
                <el-icon class="iconft">
                  <ArrowDown v-if="index != TabClick" />
                  <ArrowUp v-else />
                </el-icon>
              </div>
              <ul v-if="index == TabClick" class="tabs">
                <li v-for="server in item" :key="server.server_id" class="tabsLi"
                  @click.stop="selectServer(server.server_id)">
                  {{ server.name }}
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <h1 class="text-left link">产品套餐</h1>
      <p class="text-left textinfo">请选择需要的配置</p>
      <div class="flex flex-wrap info-box">
        <div v-for="plan in plandata" v-if="plandata.length > 0" :key="plan.plan_id"
          class="p-4 xl:w-1/4 md:w-1/2 w-full" @click="selectPlan(plan.plan_id)">
          <div class="h-full p-6 rounded-lg border-2 border-gray-300 flex flex-col relative overflow-hidden" :class="{
            'border-indigo-500': plan.plan_id === selectedPlanId
          }">
            <div v-if="selectedPlanId === plan.plan_id"
              class="bg-indigo-500 text-white px-3 py-1 tracking-widest text-xs absolute right-0 top-0 rounded-bl">
              选择
            </div>
            <h2 class="text-sm tracking-widest title-font mb-1 font-medium">
              {{ plan.name }}
            </h2>
            <h1 class="text-5xl text-gray-900 leading-none flex items-center pb-4 mb-4 border-b border-gray-200"
              style="font-size: 40px">
              <span>¥{{ plan.price }}</span>
              <span class="text-lg ml-1 font-normal text-gray-500">/月</span>
              <el-tag :type="plan.number == 0 ? 'danger' : 'primary'" style="margin-left: 5px">{{
                plan.number == 0 ? "售罄" : "库存：" + plan.number
              }}</el-tag>
            </h1>
            <p class="flex items-center text-gray-600 mb-2">
              <span
                class="w-4 h-4 mr-2 inline-flex items-center justify-center bg-gray-400 text-white rounded-full flex-shrink-0">
                <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"
                  class="w-3 h-3" viewBox="0 0 24 24">
                  <path d="M20 6L9 17l-5-5" />
                </svg> </span>上行带宽:{{ Math.floor(plan.bandwidth_tx) }} Mbps
            </p>
            <p class="flex items-center text-gray-600 mb-2">
              <span
                class="w-4 h-4 mr-2 inline-flex items-center justify-center bg-gray-400 text-white rounded-full flex-shrink-0">
                <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"
                  class="w-3 h-3" viewBox="0 0 24 24">
                  <path d="M20 6L9 17l-5-5" />
                </svg> </span>下行带宽:{{ Math.floor(plan.bandwidth_rx) }} Mbps
            </p>
            <p class="flex items-center text-gray-600 mb-2">
              <span
                class="w-4 h-4 mr-2 inline-flex items-center justify-center bg-gray-400 text-white rounded-full flex-shrink-0">
                <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"
                  class="w-3 h-3" viewBox="0 0 24 24">
                  <path d="M20 6L9 17l-5-5" />
                </svg> </span>CPU:{{ plan.cpu }} 毫核
            </p>
            <p class="flex items-center text-gray-600 mb-2">
              <span
                class="w-4 h-4 mr-2 inline-flex items-center justify-center bg-gray-400 text-white rounded-full flex-shrink-0">
                <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"
                  class="w-3 h-3" viewBox="0 0 24 24">
                  <path d="M20 6L9 17l-5-5" />
                </svg> </span>内存:{{ plan.memory }} MB
            </p>
            <p class="flex items-center text-gray-600 mb-6">
              <span
                class="w-4 h-4 mr-2 inline-flex items-center justify-center bg-gray-400 text-white rounded-full flex-shrink-0">
                <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"
                  class="w-3 h-3" viewBox="0 0 24 24">
                  <path d="M20 6L9 17l-5-5" />
                </svg> </span>硬盘:{{ plan.disk }} GB
            </p>
            <button :disabled="plan.number == 0" :class="plan.number != 0
                ? ' hover:bg-indigo-500 flex items-center mt-auto text-white bg-indigo-500 border-0 py-2 px-4 w-full focus:outline-none rounded'
                : 'flex items-center mt-auto text-white bg-gray-400 border-0 py-2 px-4 w-full focus:outline-none rounded'
              " @click="buyNow(selectedServerId, selectedPlanId)">
              购买
              <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                class="w-4 h-4 ml-auto" viewBox="0 0 24 24">
                <path d="M5 12h14M12 5l7 7-7 7" />
              </svg>
            </button>
            <p class="text-xs text-gray-500 mt-3">{{ plan.description }}</p>
          </div>
        </div>
        <div v-else class="Empty-state">
          <el-empty description="等待添加" />
        </div>
      </div>
      <div class="Empty-state mt-5">
        <el-pagination style="margin: 10px" background layout="prev, pager, next" :total="total"
          :current-page="pagin.page" :page-size="pagin.count" @update:current-page="handleCurrentPageChange" />
      </div>
    </div>
  </section>
  <payLog :dialogFormVisible="dialogFormVisible" :server_id="selectedServerId" :plan_id="selectedPlanId"
    @close="dialogFormVisible = false" />
</template>

<script setup>
import { getUserServer, getUserPackage } from "@/api/user";
import { onMounted, ref, reactive } from "vue";
import { getSettings } from "@/api/setting";
import payLog from "../../components/MessTable/payLog.vue";
import { message } from "@/utils/message";
import router from "@/router";
import { ArrowDown, ArrowUp } from "@element-plus/icons-vue";
import { getProductList } from "@/utils/dataDispose";

const serverdata = ref([]);
const plandata = ref([]);
const dialogFormVisible = ref(false);

const selectedServerId = ref(null);
const selectedPlanId = ref(null);
const total = ref(10);
const pagin = reactive({
  page: 1,
  count: 8
});
const serverpagin = reactive({
  page: 1,
  count: 1,
  total: 1
});
const infos = ref({});
onMounted(() => {
  getSettings(["servercount"]).then(res => {
    infos.value = res.data.data;
    serverpagin.count = infos.value.servercount;
  });
  getUserServer()
    .then(res => {
      serverdata.value = getProductList(res.data);
      ConfirmTabs.value = Object.keys(getProductList(res.data))[0];
      selectedServerId.value =
        serverdata.value[ConfirmTabs.value]?.[0]?.server_id;
    })
    .then(() => {
      getPlan();
    });
});

const selectServer = id => {
  TabClick.value = "";
  selectedServerId.value = id;
  getPlan();
};
const selectPlan = id => {
  console.log("选择的套餐", id);
  selectedPlanId.value = id;
};
//获取套餐列表
const getPlan = () => {
  getUserPackage(selectedServerId.value).then(res => {
    plandata.value = res.data;
    plandata.value = plandata.value.slice(
      (pagin.page - 1) * pagin.count,
      pagin.page * pagin.count
    );
    total.value = res.data.length;
  });
};
// 菜单切换
const TabClick = ref("");
const ConfirmTabs = ref("");
const TbasInfo = data => {
  if (TabClick.value == data) {
    TabClick.value = "";
  } else {
    TabClick.value = data;
    ConfirmTabs.value = data;
  }
};
const handleCurrentPageChange = async newPage => {
  pagin.page = newPage;
  getPlan();
};
const nextpage = () => {
  if (serverpagin.page < serverpagin.total) {
    serverpagin.page++;
    getUserServer()
      .then(res => {
        serverdata.value = res.data;
        serverdata.value = serverdata.value.slice(
          (serverpagin.page - 1) * serverpagin.count,
          serverpagin.page * serverpagin.count
        );
        selectedServerId.value = serverdata.value[0].server_id;
      })
      .then(() => {
        getPlan();
      });
  }
};
const lastpage = () => {
  if (serverpagin.page > 1) {
    serverpagin.page--;
    getUserServer()
      .then(res => {
        serverdata.value = res.data;
        serverdata.value = serverdata.value.slice(
          (serverpagin.page - 1) * serverpagin.count,
          serverpagin.page * serverpagin.count
        );
        selectedServerId.value = serverdata.value[0].server_id;
      })
      .then(() => {
        getPlan();
      });
  }
};
const buyNow = (serverId, planId) => {
  if (localStorage.getItem("token")) {
    dialogFormVisible.value = true;
  } else {
    message("请先登录", { type: "error" });
    router.push("/login");
  }
};
</script>

<style lang="scss" scoped>
.contBox {
  width: 100%;
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
}

.items-tabs {
  width: 100%;
  text-align: left;
  user-select: none;
}

.hover-list {
  color: #48b0f7;
}

.list-tabs {
  text-align: center;
  width: 250px;
  font-size: 19px;
  display: inline-block;
  position: relative;
  line-height: 45px;
  padding: 0 14px;
  border-radius: 5px;
  margin: 0 0.8% 20px;
  cursor: pointer;
  outline: 2px solid #eee;
  transition: all 0.3s ease-in-out;
  position: relative;
}

.tabs {
  width: 100%;
  position: absolute;
  left: 0;
  top: 47px;
  z-index: 5;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 5px;
}

.info-box {
  min-height: 403px;
}

.tabsLi {
  color: #333;
}

.tabsLi:hover {
  color: #48b0f7;
  background: rgb(74 178 247 / 10%);
}

.Empty-state {
  display: flex;
  width: 100%;
  justify-content: center;
}

.text-left {
  text-align: left;
}

.link {
  border-left: 4px solid #37b5c1;
  font-size: 1.5rem;
  padding-left: 1rem;
  font-weight: 700;
  line-height: 1.2;
  color: #5e5873;
  margin-bottom: 0.25rem;
}

.textinfo {
  color: #b9b9c3;
  line-height: 1.5rem;
  margin-bottom: 1rem;
}

.iconft {
  position: absolute;
  right: 10px;
  top: 14px;
}

@media (max-width: 1199px) {
  .list-tabs {
    font-size: 16px;
    line-height: 35px;
    margin: 0 0.8% 8px;
    padding: 0 12px;
  }

  .items-tabs {
    text-align: center;
  }
}
</style>
